<template>
  <div class="data-management">
    <!-- 数据管理概览 -->
    <div class="data-overview-page">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-content">
          <h2>数据管理中心</h2>
          <p>统一管理和监控系统中的所有数据资源</p>
        </div>
        <div class="header-actions">
          <el-button :icon="Refresh" @click="refreshOverview">
            刷新数据
          </el-button>
        </div>
      </div>

      <!-- 数据统计卡片 -->
      <div class="stats-section">
        <el-row :gutter="20">
          <el-col :span="6" v-for="stat in dataStats" :key="stat.key">
            <el-card class="stat-card" :class="stat.key" @click="navigateToDetail(stat.key)">
              <div class="stat-content">
                <div class="stat-icon">
                  <el-icon :size="32" :color="stat.color">
                    <component :is="stat.icon" />
                  </el-icon>
                </div>
                <div class="stat-info">
                  <h3>{{ stat.title }}</h3>
                  <p class="stat-value">{{ stat.value }}</p>
                  <span class="stat-desc">{{ stat.description }}</span>
                </div>
                <div class="stat-trend" :class="stat.trend">
                  <el-icon :size="16">
                    <component :is="stat.trend === 'up' ? 'ArrowUp' : 'ArrowDown'" />
                  </el-icon>
                  <span>{{ stat.change }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 快捷操作 -->
      <div class="quick-actions-section">
        <el-card>
          <template #header>
            <h3>快捷操作</h3>
          </template>
          <div class="quick-actions">
            <div class="action-item" v-for="action in quickActions" :key="action.key" @click="handleQuickAction(action.key)">
              <div class="action-icon">
                <el-icon :size="24" :color="action.color">
                  <component :is="action.icon" />
                </el-icon>
              </div>
              <div class="action-content">
                <h4>{{ action.title }}</h4>
                <p>{{ action.description }}</p>
              </div>
              <div class="action-arrow">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 数据源状态 -->
      <div class="data-sources-section">
        <el-card>
          <template #header>
            <div class="section-header">
              <h3>数据源状态</h3>
              <el-button size="small" :icon="Setting" @click="manageDataSources">
                管理数据源
              </el-button>
            </div>
          </template>
          <div class="data-sources">
            <div class="source-item" v-for="source in dataSources" :key="source.key">
              <div class="source-info">
                <div class="source-icon">
                  <el-icon :size="20" :color="source.color">
                    <component :is="source.icon" />
                  </el-icon>
                </div>
                <div class="source-details">
                  <h4>{{ source.name }}</h4>
                  <p>{{ source.description }}</p>
                </div>
              </div>
              <div class="source-status">
                <el-tag :type="source.status === 'active' ? 'success' : 'danger'" size="small">
                  {{ source.status === 'active' ? '正常' : '异常' }}
                </el-tag>
                <span class="last-sync">{{ source.lastSync }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 最近活动 -->
      <div class="recent-activities-section">
        <el-card>
          <template #header>
            <div class="section-header">
              <h3>最近活动</h3>
              <el-button size="small" type="primary" link @click="viewAllActivities">
                查看全部
              </el-button>
            </div>
          </template>
          <div class="activities-list">
            <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
              <div class="activity-icon">
                <el-icon :size="16" :color="activity.color">
                  <component :is="activity.icon" />
                </el-icon>
              </div>
              <div class="activity-content">
                <p class="activity-text">{{ activity.text }}</p>
                <span class="activity-time">{{ activity.time }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 子路由视图 -->
    <router-view v-if="$route.name !== 'DataManagement'" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Refresh, ArrowUp, ArrowDown, ArrowRight, Setting,
  DataBoard, Upload, FolderOpened, Monitor, Database,
  Document, SuccessFilled, WarningFilled, InfoFilled
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const dataStats = ref([
  {
    key: 'total_records',
    title: '总数据量',
    value: '2.5M',
    description: '所有数据记录',
    change: '+12.5%',
    trend: 'up',
    icon: 'DataBoard',
    color: '#409EFF'
  },
  {
    key: 'daily_import',
    title: '今日导入',
    value: '15.2K',
    description: '新增数据记录',
    change: '+8.3%',
    trend: 'up',
    icon: 'Upload',
    color: '#67C23A'
  },
  {
    key: 'data_sources',
    title: '数据源',
    value: '8',
    description: '活跃数据源',
    change: '0%',
    trend: 'up',
    icon: 'Database',
    color: '#E6A23C'
  },
  {
    key: 'storage_used',
    title: '存储使用',
    value: '68.5%',
    description: '存储空间占用',
    change: '+2.1%',
    trend: 'up',
    icon: 'FolderOpened',
    color: '#F56C6C'
  }
])

const quickActions = ref([
  {
    key: 'import',
    title: '数据导入',
    description: '导入新的数据文件',
    icon: 'Upload',
    color: '#409EFF'
  },
  {
    key: 'manage',
    title: '数据管理',
    description: '查看和管理现有数据',
    icon: 'FolderOpened',
    color: '#67C23A'
  },
  {
    key: 'monitor',
    title: '数据监控',
    description: '监控数据质量和状态',
    icon: 'Monitor',
    color: '#E6A23C'
  },
  {
    key: 'export',
    title: '数据导出',
    description: '导出数据到外部系统',
    icon: 'Document',
    color: '#F56C6C'
  }
])

const dataSources = ref([
  {
    key: 'user_behavior',
    name: '用户行为数据',
    description: '用户在平台上的行为记录',
    status: 'active',
    lastSync: '2分钟前',
    icon: 'DataBoard',
    color: '#409EFF'
  },
  {
    key: 'transaction',
    name: '交易数据',
    description: '用户购买和支付记录',
    status: 'active',
    lastSync: '5分钟前',
    icon: 'Database',
    color: '#67C23A'
  },
  {
    key: 'product_catalog',
    name: '商品目录',
    description: '商品信息和分类数据',
    status: 'active',
    lastSync: '10分钟前',
    icon: 'FolderOpened',
    color: '#E6A23C'
  },
  {
    key: 'user_profile',
    name: '用户画像',
    description: '用户基础信息和标签',
    status: 'error',
    lastSync: '2小时前',
    icon: 'Monitor',
    color: '#F56C6C'
  }
])

const recentActivities = ref([
  {
    id: 1,
    text: '成功导入用户行为数据 15,420 条记录',
    time: '5分钟前',
    icon: 'SuccessFilled',
    color: '#67C23A'
  },
  {
    id: 2,
    text: '数据源"用户画像"连接异常',
    time: '15分钟前',
    icon: 'WarningFilled',
    color: '#F56C6C'
  },
  {
    id: 3,
    text: '完成数据清洗任务，处理 8,965 条记录',
    time: '1小时前',
    icon: 'InfoFilled',
    color: '#409EFF'
  },
  {
    id: 4,
    text: '用户张三导出了商品分析报告',
    time: '2小时前',
    icon: 'Document',
    color: '#E6A23C'
  }
])

// 方法
const refreshOverview = () => {
  ElMessage.success('数据已刷新')
}

const navigateToDetail = (key) => {
  switch (key) {
    case 'total_records':
    case 'daily_import':
      router.push('/data/manage')
      break
    case 'data_sources':
      ElMessage.info('数据源管理功能开发中...')
      break
    case 'storage_used':
      ElMessage.info('存储管理功能开发中...')
      break
  }
}

const handleQuickAction = (key) => {
  switch (key) {
    case 'import':
      router.push('/data/import')
      break
    case 'manage':
      router.push('/data/manage')
      break
    case 'monitor':
      ElMessage.info('数据监控功能开发中...')
      break
    case 'export':
      ElMessage.info('数据导出功能开发中...')
      break
  }
}

const manageDataSources = () => {
  ElMessage.info('数据源管理功能开发中...')
}

const viewAllActivities = () => {
  ElMessage.info('活动日志功能开发中...')
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.data-management {
  padding: 0;
  background-color: transparent;
}

.data-overview-page {
  padding: 0;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-content h2 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.header-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 统计卡片 */
.stats-section {
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  position: relative;
}

.stat-icon {
  padding: 12px;
  border-radius: 12px;
  background: rgba(64, 158, 255, 0.1);
}

.stat-info {
  flex: 1;
}

.stat-info h3 {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.stat-value {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.stat-desc {
  color: #999;
  font-size: 12px;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.stat-trend.up {
  background: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.stat-trend.down {
  background: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
}

/* 快捷操作 */
.quick-actions-section {
  margin-bottom: 24px;
}

.quick-actions-section .el-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.action-icon {
  margin-right: 12px;
  padding: 8px;
  border-radius: 8px;
  background: white;
}

.action-content {
  flex: 1;
}

.action-content h4 {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.action-content p {
  margin: 0;
  color: #666;
  font-size: 12px;
}

.action-arrow {
  color: #999;
}

/* 数据源状态 */
.data-sources-section {
  margin-bottom: 24px;
}

.data-sources-section .el-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.data-sources {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.source-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
}

.source-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.source-icon {
  padding: 8px;
  border-radius: 8px;
  background: white;
}

.source-details h4 {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.source-details p {
  margin: 0;
  color: #666;
  font-size: 12px;
}

.source-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.last-sync {
  color: #999;
  font-size: 12px;
}

/* 最近活动 */
.recent-activities-section .el-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.activity-icon {
  padding: 6px;
  border-radius: 6px;
  background: white;
  margin-top: 2px;
}

.activity-content {
  flex: 1;
}

.activity-text {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

.activity-time {
  color: #999;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-section .el-col {
    margin-bottom: 16px;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .source-item {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .source-status {
    align-items: center;
  }
}

@media (max-width: 480px) {
  .data-management {
    padding: 0 16px;
  }

  .page-header {
    padding: 16px;
  }

  .stat-content {
    padding: 16px;
  }
}
</style>
